<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-align: center;
        }

        .div1 {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: red;
            text-align: center;
            padding-top: 35px;

        }

        .ul1 {
            margin: 0 auto;
            width: 200px;
            height: 200px;
            position: relative;
        }

        .ul1 li {
            width: 200px;
            line-height: 200px;
            text-align: center;
            position: absolute;
            font-size: 35px;
            text-shadow: 0 0 5px #000000;
            color: #ffffff;
            opacity: 0;
            transition: opacity 1s;
        }

        .ul1 .li1 {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="div1">点击</div>
    <ul class="ul1">
        <li class="li1">镇山的虎</li>
        <li>敏捷的豹</li>
        <li>远见的鹰</li>
        <li>善战的狼</li>
    </ul>
    <button class="btn1">上一个</button>
    <button class="btn2">下一个</button>
    <script>
        var div1 = document.querySelector('.div1');
        // div1.onclick = function () {
        //     alert('你点击了div1');
        // }
        // div1.onclick = function () {//这样写会覆盖掉之前的onclick事件
        //     alert('你又点击了div1');
        // }
        div1.addEventListener('click', function () {//这样写不会覆盖掉之前的onclick事件，注意修改css属性还是覆盖
            alert('你点击了div1');
        })
        div1.addEventListener('click', function () {
            alert('你又点击了div1');
        })
        var lilist = document.querySelectorAll('.ul1 li');
        var ul = document.querySelector('.ul1');
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        console.log(lilist);
        index = 0;
        btn2.addEventListener('click', function () {
            lilist[index].classList.remove('li1')
            index++;
            if (index >= lilist.length) {
                index = 0;
            }
            lilist[index].classList.add('li1')
        })
        btn1.addEventListener('click', () => {
            lilist[index].classList.remove('li1')
            index--;
            if (index < 0) {
                index = lilist.length - 1;
            }
            lilist[index].classList.add('li1')
        })
        //定时器
        // setTimeout(() => {
        //     console.log('定时器执行');
        // }, 2000);//每次刷新后2秒后执行，只执行一次
        // setInterval(() => {
        //     console.log('每两秒输出一次');
        // }, 2000);//每次刷新后2秒后执行，一直执行

        var timer = setInterval(() => {
            console.log('每两秒输出一次');
        }, 2000);
        setTimeout(() => {
            clearInterval(timer); //停止定时器
        }, 5000); //5秒后停止定时器

        //每2s自动帮我点击下一个
        setInterval(() => {
            lilist[index].classList.remove('li1')
            index++;
            if (index >= lilist.length) {
                index = 0;
            }
            lilist[index].classList.add('li1')
        }, 2000);
    </script>
</body>

</html>